<script setup>
/**
 * @/views/home/components/Info.vue
 */

/* 导入 */
import { useRouter } from "vue-router";
import Map from "@/views/home/components/Map.vue";
import { watch, ref, inject } from "vue";
import { useTownStore } from "@/stores";
import ArticleListContainer from "@/views/home/components/ArticleListContainer.vue";
const axios = inject("$axios");

/* 数据 */
const router = useRouter();
const townStore = useTownStore();
const townName = ref("");
const foodMerchants = ref([]);
const productMerchants = ref([]);
const innMerchants = ref([]);

/* 回调 */
// 跳转到 /news 路由的函数
const goTo = (path) => {
  router.push(path);
};

// 获取指定小镇和分类的商家列表
const getMerchantsOfTownAndSort = async (town, sort) => {
  try {
    const response = await axios.get("/merchants/filter", {
      params: { town: town, sort: sort },
    });
    return response.data;
  } catch (error) {
    console.error("获取商店失败: ", error);
    return [];
  }
};

/* 侦听 */
watch(
  () => townStore.currentTown,
  async (newTown) => {
    if (newTown && newTown.townname) {
      townName.value = newTown.townname;
      foodMerchants.value = await getMerchantsOfTownAndSort(
        newTown.townname,
        "美食",
      );
      productMerchants.value = await getMerchantsOfTownAndSort(
        newTown.townname,
        "商品",
      );
      innMerchants.value = await getMerchantsOfTownAndSort(
        newTown.townname,
        "客栈",
      );
    }
  },
  { immediate: true },
);
</script>

<template>
  <div class="town-info">
    <el-space fill :size="20" style="width: 100%">
      <!-- 简要小镇服务 -->
      <div>
        <el-space :size="20" fill wrap :fill-ratio="20" style="width: 100%">
          <!-- 旅游组件 -->
          <el-card
            class="el-card"
            style="max-width: 100vw; height: 400px"
            shadow="hover"
          >
            <template #header>
              <p>
                小镇服务-旅游
                <el-popover
                  placement="top-start"
                  trigger="hover"
                  content="点击跳转-旅游-详情页面"
                >
                  <template #reference>
                    <el-text
                      class="mx-1"
                      type="danger"
                      @click="goTo('/service-travel')"
                    >
                      [点击详情]
                    </el-text>
                  </template>
                </el-popover>
              </p>
            </template>
            <div style="width: 100%; height: 300px">
              <!-- 地图组件 -->
              <Map :searchKeyword="townName" />
            </div>
          </el-card>
          <!-- 美食组件 -->
          <el-card
            v-if="foodMerchants.length !== 0"
            style="max-width: 100vw; height: 400px"
            shadow="hover"
          >
            <template #header>
              <p>
                小镇服务-美食
                <el-popover
                  placement="top-start"
                  trigger="hover"
                  content="点击跳转-美食-详情页面"
                >
                  <template #reference>
                    <el-text
                      class="mx-1"
                      type="danger"
                      @click="goTo('/service-food')"
                    >
                      [点击详情]
                    </el-text>
                  </template>
                </el-popover>
              </p>
            </template>
            <div style="width: 100%; height: 300px">
              <el-carousel direction="vertical" type="card">
                <el-carousel-item v-for="merchant in foodMerchants">
                  <el-card v-if="merchant.isPublished === true">
                    <el-space direction="vertical">
                      <el-text class="mx-1" type="warning">
                        {{ merchant.merchantname }}
                      </el-text>
                      <el-text class="mx-1" type="info">
                        {{ merchant.info }}
                      </el-text>
                      <el-image
                        v-if="merchant.pictureurl"
                        :src="merchant.pictureurl"
                        alt="商家图片"
                        style="width: 100%; height: 150px; object-fit: cover"
                      />
                    </el-space>
                  </el-card>
                </el-carousel-item>
              </el-carousel>
            </div>
          </el-card>
          <!-- 商品组件 -->
          <el-card
            v-if="productMerchants.length !== 0"
            style="max-width: 100vw; height: 400px"
            shadow="hover"
          >
            <template #header>
              <p>
                小镇服务-商品
                <el-popover
                  placement="top-start"
                  trigger="hover"
                  content="点击跳转-商品-详情页面"
                >
                  <template #reference>
                    <el-text
                      class="mx-1"
                      type="danger"
                      @click="goTo('/service-product')"
                    >
                      [点击详情]
                    </el-text>
                  </template>
                </el-popover>
              </p>
            </template>
            <div style="width: 100%; height: 300px">
              <el-carousel direction="vertical" type="card">
                <el-carousel-item v-for="merchant in productMerchants">
                  <el-card v-if="merchant.isPublished === true">
                    <el-space direction="vertical">
                      <el-text class="mx-1" type="warning">
                        {{ merchant.merchantname }}
                      </el-text>
                      <el-text class="mx-1" type="info">
                        {{ merchant.info }}
                      </el-text>
                      <el-image
                        v-if="merchant.pictureurl"
                        :src="merchant.pictureurl"
                        alt="商家图片"
                        style="width: 100%; height: 150px; object-fit: cover"
                      />
                    </el-space>
                  </el-card>
                </el-carousel-item>
              </el-carousel>
            </div>
          </el-card>
          <!-- 客栈组件 -->
          <el-card
            v-if="innMerchants.length !== 0"
            style="max-width: 100vw; height: 400px"
            shadow="hover"
          >
            <template #header>
              <p>
                小镇服务-客栈
                <el-popover
                  placement="top-start"
                  trigger="hover"
                  content="点击跳转-客栈-详情页面"
                >
                  <template #reference>
                    <el-text
                      class="mx-1"
                      type="danger"
                      @click="goTo('/service-inn')"
                    >
                      [点击详情]
                    </el-text>
                  </template>
                </el-popover>
              </p>
            </template>
            <div style="width: 100%; height: 300px">
              <el-carousel direction="vertical" type="card">
                <el-carousel-item v-for="merchant in innMerchants">
                  <el-card v-if="merchant.isPublished === true">
                    <el-space direction="vertical">
                      <el-text class="mx-1" type="warning">
                        {{ merchant.merchantname }}
                      </el-text>
                      <el-text class="mx-1" type="info">
                        {{ merchant.info }}
                      </el-text>
                      <el-image
                        v-if="merchant.pictureurl"
                        :src="merchant.pictureurl"
                        alt="商家图片"
                        style="width: 100%; height: 150px; object-fit: cover"
                      />
                    </el-space>
                  </el-card>
                </el-carousel-item>
              </el-carousel>
            </div>
          </el-card>
        </el-space>
      </div>
      <!-- 简要小镇动态 -->
      <el-card class="el-card" style="max-width: 100vw" shadow="hover">
        <template #header>
          <p>
            小镇动态
            <el-popover
              placement="top-start"
              trigger="hover"
              content="点击跳转-动态-详情页面"
            >
              <template #reference>
                <el-text class="mx-1" type="danger" @click="goTo('/news')">
                  [点击详情]
                </el-text>
              </template>
            </el-popover>
          </p>
        </template>
        <ArticleListContainer :town="townName" :sort="'动态'" :max-items="5" />
      </el-card>
      <!-- 简要小镇文化 -->
      <el-card class="el-card" style="max-width: 100vw" shadow="hover">
        <template #header>
          <p>
            小镇文化
            <el-popover
              placement="top-start"
              trigger="hover"
              content="点击跳转-文化-详情页面"
            >
              <template #reference>
                <el-text class="mx-1" type="danger" @click="goTo('/culture')">
                  [点击详情]
                </el-text>
              </template>
            </el-popover>
          </p>
        </template>
        <ArticleListContainer :town="townName" :sort="'文化'" :max-items="5" />
      </el-card>
      <!-- 简要小镇保护 -->
      <el-card class="el-card" style="max-width: 100vw" shadow="hover">
        <template #header>
          <p>
            小镇保护
            <el-popover
              placement="top-start"
              trigger="hover"
              content="点击跳转-保护-详情页面"
            >
              <template #reference>
                <el-text
                  class="mx-1"
                  type="danger"
                  @click="goTo('/protection')"
                >
                  [点击详情]
                </el-text>
              </template>
            </el-popover>
          </p>
        </template>
        <ArticleListContainer :town="townName" :sort="'保护'" :max-items="5" />
      </el-card>
    </el-space>
  </div>
</template>

<style scoped></style>
